<!--
 * @Author: your name
 * @Date: 2021-08-07 22:35:05
 * @LastEditTime: 2021-08-11 01:43:16
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Self\hrsaas-86\src\views\departments\commponents\tree-tools.vue
-->
<template>
  <el-row type="flex" justify="space-between" style="width:100%">
    <el-col :span="20">
      <div class="grid-content bg-purple">{{ Data.name }}</div>
    </el-col>
    <el-col :span="4">
      <div class="grid-content bg-purple-light">
        <el-row>
          <el-col :span="12">{{ Data.manager }}</el-col>
          <el-col :span="12">
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link" style="font-size:14px" @click.stop>
                操作
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                <el-dropdown-item v-if="isRoot" command="edit">
                  查看部门
                </el-dropdown-item>
                <el-dropdown-item v-if="isRoot" command="del">
                  删除部门
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import { reqDelDepartments } from '@/api/departments.js'
export default {
  name: 'TreeTools',
  props: {
    //   父组件传递的树形结构的每一行的数据
    Data: {
      type: Object,
      required: true
    },
    isRoot: {
      type: Boolean,
      default: false
    }
  },

  mounted() {},

  methods: {
    async handleCommand(command) {
      // console.log(command)
      if (command === 'del') {
        // 删除部门
        console.log('删除拉')
        // 1 .确认提示框
        const str = await this.$confirm('您确认删除该部门?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {
          this.$message('已取消操作')
        })
        // 2. str===confirm就说明用户点击了确定
        if (str === 'confirm') {
          // console.log(111)
          // 3.发送请求
          const res = await reqDelDepartments(this.Data.id)
          // 4.提示用户
          this.$message.success(res.message)
          // 5.由于单向数据流的原因,需要向父组件传递事件
          this.$emit('reload')
        }
      }
      if (command === 'add') {
        // 通知父组件的控制新增部门对话框的布尔值设置为true
        this.$emit('addDepts', this.Data)
        console.log(this.Data)
      }
      if (command === 'edit') {
        
        this.$emit('editDepts', this.Data)
       
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
